<template>
    <div>
        {{ myValue }}
        <!-- <input type="text" v-model="myValue"> -->
        <!-- <input type="text" :value="myValue" @input="myValue = $event.target.value"> -->

        <!-- 父传子+子传父 -->
        <!-- <Field mylabel="用户名" :myValue="myValue" @toFieldEvent="handleEvent"></Field> -->

        <!-- v-model方式 -->
        <!-- <Field mylabel="姓名" v-model="myValue"></Field> -->
        <!-- 自定义属性名 -->
        <Field mylabel="姓名" v-model:seupyy="myValue"></Field>
        <!-- 上面写法等价于下面 -->
        <Field mylabel="姓名" :seupyy="myValue" @update:seupyy="handleEvent"></Field>

        <button @click="handleRegister">注册</button>
        <button @click="handleReset">重置</button>
    </div>
</template>

<script>
import Field from './Field.vue'
export default {
    components: {
        Field
    },
    data() {
        return {
            myValue: ""
        }
    },
    methods: {
        handleRegister() {
            console.log("注册成功");
            console.log(this.myValue);
        },
        handleReset() {
            console.log("重置成功");
            this.myValue = ""
        },
        handleEvent(value) {
            this.myValue = value
        }
    }
}
</script>